<template>
	<div class="content">
		<div v-if="hasSearch" :class="searchBarClass" :style="searchBarStyle">
			<input type="text" v-model="insearch" :placeholder="searchPlaceholder"
				@keydown.enter.native="hBeginSearch" />
			<div class="search-btn">
				<button @click="hBeginSearch"></button>
			</div>
		</div>
		<div class="table-wrapper">
			<table cellspacing="" cellpadding="" :style="[hasSearch ? 'height:calc(100% - 30px);' : '']">
				<thead :style="headStl">
					<tr>
						<th v-for="h in head"
							:style="`font-size:${h.size || 'auto'};font-family:${h.family || 'auto'};width:${h.w || 'auto'}`"
							:class="{ 'sort': h.sort, 'color': '#ffffff' }" @click="hSort(h.k, h.sort)">
							{{ h.v }}
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(r, i) in dats" :style="itemStl" @dblclick="onDb(r)">
						<td v-for="h in head" :style="`width:${h.w || 'auto'}; color: ${h.color || ''}`"
							@click="h.click?.(r, i)" :class="{ 'cur': h.click }">
							<div v-if="h.icon" class="bimg" :class="{ 'act': actRow == i }">
								<img :src="h.icon" height="20" width="auto" />
							</div>
							<template v-else>
								<span v-html="r[h.k]"></span>
							</template>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

<script setup>
import {
	ref,
	watch,
	defineProps,
	defineEmits,
	nextTick,
	onMounted
} from 'vue';

// Props 接收父组件传递的数据
const props = defineProps({
	hasSearch: {
		type: Boolean,
		default: true
	},
	searchBarClass: {
		type: String,
		default: 'search-bar'
	},
	searchBarStyle: {
		type: Object,
		default: () => ({})
	},
	searchPlaceholder: {
		type: String,
		default: 'Search...'
	},
	headStl: {
		type: String,
		default: "width:405px; height:37.9px; margin-left: 0px; background-size: 100% 100%; background-position: left;"
	},
	itemStl: {
		type: String,
		default: "background-image:url('/imgs/nw/图层 1301.png'); width:408px; height:49px; margin-left: 0px; background-size: 100% 100%; background-position: left;"
	},
	head: {
		type: Array,
		default: () => [{
			k: 'id',
			v: 'ID',
			w: '20%'
		},
		{
			k: 'name',
			v: 'Name',
			w: '50%'
		}
		]
	},
	rows: {
		type: Array,
		default: () => [{
			id: 1,
			name: 'Alice'
		},
		{
			id: 2,
			name: 'Bob'
		},
		{
			id: 3,
			name: 'Charlie'
		}
		]
	},
});
const insearch = ref("");
// Emits 事件
const emits = defineEmits(['dbEvent', 'row-dblclick', 'dblclick', 'search']);

// 表格行高亮和选择
const actRow = ref(-1);
const dats = ref(props.rows);  // 默认使用父组件传递的 `rows` 数据

// 双击事件
const onDb = (row) => {
	emits("dbEvent", row);
	emits("row-dblclick", row);
	emits("dblclick", row);
};

// 数据变动时的处理
watch(() => props.rows, (newRows) => {
	dats.value = newRows;
});
watch(() => insearch.value, (newVal) => {
	if (newVal == "") {
		hBeginSearch()
	}
})

// 搜索相关
let sh = -1;

const hBeginSearch = () => {
	clearTimeout(sh);
	let k = insearch.value;
	if (!k || k.length == 0) {
		dats.value = props.rows;
		return;
	}

	sh = setTimeout(() => {
		const rows = props.rows.filter(row => {
			return Object.keys(row).some(key => {
				return String(row[key]).includes(k);
			});
		});
		dats.value = rows;
	}, 500);
};

// 排序功能
let sortK = {};
const hSort = (k, sort) => {
	if (!sort) return;

	if (!sortK[k]) sortK[k] = {
		asc: false
	};
	sortK[k].asc = !sortK[k].asc;

	const arr = dats.value;
	arr.sort((a, b) => {
		if (sortK[k].asc) return a[k] - b[k];
		return b[k] - a[k];
	});
	dats.value = [...arr]; // 重新赋值触发视图更新
};

onMounted(() => nextTick(() => { }));
</script>

<style scoped lang="scss">
/* 新增行悬停效果 */
tbody tr {
	transition: all 0.3s ease; // 添加过渡动画

	&:hover {
		background: #4f9df4 !important;
		box-shadow: 0 2px 8px rgba(56, 134, 198, 0.2); // 添加阴影效果

		td {
			color: #fff !important; // 文字颜色变白
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); // 文字阴影
		}

		.bimg img {
			filter: brightness(1.2); // 图标高亮
		}
	}
}

/* 针对所有输入框的通用样式 */
input[type="text"],
input[type="text"]:focus,
input[type="text"]:active,
input[type="text"]:hover {
	/* 移除边框 */
	border: none !important;
	/* 移除轮廓线 */
	outline: none !important;
	/* 移除阴影（某些浏览器或框架会默认添加） */
	box-shadow: none !important;
}

.bimg {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;

	img {
		width: 80%;
		height: auto;
	}
}

.content {
	width: 100%;
	height: 99%;
	position: relative;
	align-items: center;

	.search-bar {
		width: 348px;
		display: flex;
		align-items: center;
		height: 30px;
		margin-bottom: 5px;
		background-image: url("/imgs/index/searchBg.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;

		input {
			width: calc(100% - 33px);
			height: 100%;

			border-radius: 4px;
			padding: 0 10px;
			background: rgba(68, 139, 240, 0.0);
			box-sizing: border-box;
			color: #000000;
		}

		.search-btn {
			width: 60px;
			height: 31px;
			background-image: url("/imgs/index/searchIcon.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				width: 23px;
				height: 23px;
				background-image: url("/imgs/af/椭圆 5.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;
				cursor: pointer;
				background-color: transparent;
				border: none;
				padding: 0;
			}
		}

		.search-btn2 {
			width: 52px;
			height: 32px;
			background-image: url("/imgs/af/矩形 11 拷贝@2x.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				width: 15px;
				height: 15px;
				background-image: url('/imgs/af/图层 742.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;
				cursor: pointer;
				background-color: transparent;
				border: none;
				padding: 0;
			}
		}

	}
}

table {
	border-collapse: collapse;
	width: 100%;
	height: 100%;
	position: absolute;
	table-layout: fixed;
}

table,
thead,
tr,
th,
td {
	border: 0px;
}

thead {
	height: 30px;
	width: calc(100% - 1em);
	margin-left: 2px;
	position: sticky;
	top: 0;
	z-index: 10;

	tr {
		height: 100%;
		align-items: center;
	}
}

tbody {
	display: block;
	height: calc(100% - 30px);
	width: 100%;
	overflow-y: auto;
	/* 隐藏滚动条但保留滚动功能 */
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;

	/* IE and Edge */
	/* WebKit浏览器 (Chrome, Safari) */
	&::-webkit-scrollbar {
		display: none;
	}
}

.act img {
	filter: hue-rotate(196deg) drop-shadow(1px 2px 2px black);
}

tbody tr {
	height: 30px;
}

tbody tr:hover {
	background: linear-gradient(90deg, #3886C6c9 -30%, rgb(56 134 198 / 27%), #3886C6c9 130%);
	border-radius: 6px;
}

th,
td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

th {
	width: 53px;
	height: 17px;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 15px;
	color: #FFFFFF;
	line-height: 18px;
	text-shadow: 1px 0px 0px rgba(52, 75, 128, 0.39);
}

tbody td {
	width: 66px;
	height: 17px;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	font-size: 15px;
	color: #FFFFFF;
	line-height: 18px;
}

tr {}

.cur {
	cursor: pointer;
}

.cur:hover {
	transform: scale(1.01);
}

table thead,
tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

th.sort {
	cursor: pointer;
	position: relative;
}

th.sort::after {
	content: "";
	background-color: #1EACC6;
	display: inline-block;
	width: 10px;
	height: 50%;
	overflow: hidden;
	clip-path: polygon(0 calc(50% - 1px), 50% 0, 100% calc(50% - 1px), 0 calc(50% - 1px),
			0 calc(50% + 1px), 100% calc(50% + 1px), 50% 100%, 0 calc(50% + 1px));
	position: absolute;
	top: 30%;
}

.table-wrapper {
	height: 100%;
	position: relative;
}
</style>